<template>
  <view class="user-info-box">
    <view class="user-info-title">基本信息</view>

    <!-- 头像上传 -->
    <view class="user-info-item">
      <text class="user-info-item-msg">头像</text>
      <view class="user-info-item-content">

        <button open-type="chooseAvatar" @chooseavatar="chooseAvatar">
          <image :src="userInfo?.avatar ? userInfo.avatar : 'https://www.lyzhnb.top/wf/wf-.jpg'" mode="scaleToFill" />
        </button>

      </view>
      <view class="user-info-item-triangle"></view>
    </view>

    <!-- 姓名 -->
    <view class="user-info-item">
      <text class="user-info-item-msg">用户名</text>
      <view class="user-info-item-content">
        <input type="nickname" @blur="chooseUsername" :value="userInfo?.username" placeholder="请输入名称" />
      </view>
      <view class="user-info-item-triangle"></view>
    </view>

    <!-- 性别 -->
    <view class="user-info-item">
      <text class="user-info-item-msg">性别</text>
      <view class="user-info-item-content">
        <input type="text" placeholder="请选择" :value="userInfo?.sex == 0 ? '男' : '女'" @click="chooseSex">
      </view>
      <view class="user-info-item-triangle"></view>
    </view>

    <!-- 生日 -->
    <view class="user-info-item">
      <text class="user-info-item-msg">生日</text>
      <view class="user-info-item-content">
        <picker mode="date" value="{{ birthYear }}" range="{{ yearRange }}" @change="chooseBorn">
          <view class="user-info-item-picker">
            {{ userInfo?.born ? userInfo.born : "请选择" }}
          </view>
        </picker>
      </view>
      <view class="user-info-item-triangle"></view>
    </view>

    <!-- 收货地址 -->
    <view class="user-info-item">
      <text class="user-info-item-msg">收货地址</text>
      <view class="user-info-item-content">

      </view>
      <view class="user-info-item-triangle"></view>
    </view>

  </view>
</template>

<script lang="ts" setup>

import { ref } from "vue"
import type { User } from "../../config/data/data"
import { onLoad, onReady, onShow, onHide, onUnload, onPageScroll, onShareAppMessage } from '@dcloudio/uni-app';
import { useUserStore } from "../../pinia/user"

//全局状态
const userInfoStore = useUserStore();


//双向绑定的用户信息
const userInfo = ref<User>();

//选择头像
const chooseAvatar = (e) => {
  if (userInfo.value) {
    userInfo.value.avatar = e.detail.avatarUrl;
  }
}

// //输入姓名
const chooseUsername = (e) => {
  if (userInfo.value) {
    userInfo.value.username = e.detail.value;
  }
}

//选择性别
const chooseSex = () => {
  uni.showActionSheet({
    itemList: ['男', '女'],
    itemColor: '#000000', // 按钮的文字颜色
    success(res) {
      if (userInfo.value) {
        userInfo.value.sex = res.tapIndex;
      }
    },
    fail(err) { }
  })
}

//选择生日
const chooseBorn = (e) => {
  if (userInfo.value) {
    userInfo.value.born = e.detail.value
  }
}


//年份范围数组
const yearRange = ref<number[]>([]);


// 页面周期函数--监听页面加载
onLoad(() => {
  userInfo.value = userInfoStore.userInfo;

  const now = new Date();
  const startYear = 1900; // 自定义开始年份
  const endYear = now.getFullYear(); // 当前年份

  // 创建年份范围数组
  for (let i = endYear; i >= startYear; i--) {
    yearRange.value.push(i);
  }
});
// 页面周期函数--监听页面初次渲染完成
onReady(() => {

});
// 页面周期函数--监听页面显示(not-nvue)
onShow(() => {
  userInfo.value = userInfoStore.userInfo;
});
// 页面周期函数--监听页面隐藏
onHide(() => {

});
// 页面周期函数--监听页面卸载
onUnload(() => {

});
// 页面处理函数--监听用户下拉动作
// onPullDownRefresh() { uni.stopPullDownRefresh(); },
// 页面处理函数--监听用户上拉触底
// onReachBottom() {},
// 页面处理函数--监听页面滚动(not-nvue)
// onPageScroll(event) {},
// 页面处理函数--用户点击右上角分享
// onShareAppMessage(options) {},

</script>

<style scoped lang="scss">
.user-info-box {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 1000rpx;

  .user-info-title {
    color: $uni-bg-color-mask;
    margin-bottom: 15rpx;
    font-size: 28rpx;
    margin-left: auto;
  }

  .user-info-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    width: 100%;

    .user-info-item-msg {
      width: 150rpx;
      font-size: 26rpx;
    }

    .user-info-item-content {
      position: relative;
      display: flex;
      width: 80%;
      z-index: 99;
      background-color: $uni-box-color;

      &::after{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        content: "";
        border: 2rpx solid white;
      }

      image {
        position: absolute;
        top: 0;
        left: 0;
        width: 80rpx;
        height: 85rpx;
      }

      button {
        position: relative;
        display: flex;
        font-size: 24rpx;
        width: 100%;
        height: 85rpx;
        background-color: $uni-box-color;
      }

      .user-info-item-picker {
        width: 100%;
        height: 100%;
      }
    }

    .user-info-item-triangle {
      width: 15rpx;
      height: 15rpx;
      border: 2px solid rgb(81, 80, 80);
      transform-origin: center center;
      transform: rotate(45deg);
      border-bottom: transparent;
      border-left: transparent;
      margin-left: auto;
    }
  }


}
</style>